<template>
  <div class="home">
    <van-search
      @focus="$router.push('/search')"
      background="#fff"
      shape="round"
      placeholder="搜索商品"
    >
      <template #left>
        <van-image
          width="63"
          height="22"
          src="http://kaifa.crmeb.net/uploads/attach/2019/08/20190801/deb30359d22c0b80f3cece86cb462104.png"
        />
      </template>
    </van-search>

    <van-swipe class="my-swipe" :autoplay="10000" @change="changeB">
      <van-swipe-item v-for="bgimage in banner1" :key="bgimage.id">
        <router-link :to="bgimage.url">
          <van-image :src="bgimage.pic" />
        </router-link>
      </van-swipe-item>
      <template #indicator>
        <div class="dot">
          <span
            v-for="i in banner1.length"
            :key="i"
            :style="{
              backgroundColor: i == bannerIndex1 ? 'rgb(0, 159, 232,1)' : '',
            }"
          ></span>
        </div>
      </template>
    </van-swipe>

    <van-grid icon-size="45px">
      <van-grid-item
        v-for="item in menus"
        :key="item.id"
        :icon="item.pic"
        :text="item.name"
        :to="item.wap_url"
      />
    </van-grid>

    <van-notice-bar mode="link">
      <template #left-icon>
        <van-image
          width="60"
          height="15"
          src=""
        ></van-image>
      </template>
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="2000"
        :show-indicators="false"
      >
        <van-swipe-item
          class="notice-swipe"
          v-for="item in noticeRoll"
          :key="item.id"
        >
          {{ item.info }}
        </van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <van-cell-group>
      <van-cell
        center
        title="快速选择"
        is-link
        value="更多"
        :label="info.fastInfo"
      />
    </van-cell-group>
    <div class="container">
      <div class="fastInfo">
        <ul>
          <li v-for="item in info.fastList" :key="item.id">
            <van-image :src="item.pic" fit="contain"></van-image>
            {{ item.cate_name }}
          </li>
        </ul>
      </div>
    </div>

    <van-cell-group>
      <van-cell
        center
        title="精品推荐"
        is-link
        value="更多"
        :label="info.bastInfo"
      />
    </van-cell-group>
    <van-swipe class="my-swipe2" :autoplay="100000" @change="changeC">
      <van-swipe-item v-for="bgimage in banner2" :key="bgimage.id">
        <router-link :to="bgimage.wap_link">
          <van-image :src="bgimage.img" />
        </router-link>
      </van-swipe-item>
      <template #indicator>
        <div class="dot">
          <span
            v-for="i in banner2.length"
            :key="i"
            :style="{
              backgroundColor: i == bannerIndex2 ? 'rgb(0, 159, 232,1)' : '',
            }"
          ></span>
        </div>
      </template>
    </van-swipe>

    <div class="container">
      <div class="recommend">
        <div class="rec_good" v-for="item in bastList" :key="item.id">
          <router-link :to="`/detail/${item.id}`">
            <div class="rec_left">
              <van-image fit="contain" :src="item.image" alt=""></van-image>
            </div>
            <div class="rec_right">
              <div class="rec_title">{{ item.store_name }}</div>
              <div class="rec_price"><span>¥</span>{{ item.price }}</div>
              <div class="rec_last">
                <div class="rec_vip">¥{{ item.vip_price }}</div>
                <div class="rec_sale">已售{{ item.sales }}件</div>
              </div>
            </div>
            <div class="rec_cart">
              <van-icon name="shopping-cart-o" color="#fc4141" />
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="hotList">
      <van-cell-group>
        <van-cell center is-link value="更多">
          <template #title>
            <span>热门榜单</span>
            <span class="hotlabel">根据销量、搜索、好评等综合得出</span>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="hotBox">
        <div class="hotItem" v-for="item in likeInfo" :key="item.id">
          <van-image :src="item.image"></van-image>
          <div class="hot_name">{{ item.store_name }}</div>
          <div class="hot_price">¥{{ item.price }}</div>
        </div>
      </div>
    </div>

    <van-cell-group class="first">
      <van-cell center is-link :label="info.firstInfo" value="更多">
        <template #title>
          <span>首发新品</span>
          <span class="firstlabel">NEW-</span>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="container">
      <div class="firstBox">
        <div class="firstItem" v-for="item in firstList" :key="item.id">
          <van-image :src="item.image"></van-image>
          <div class="first_name">{{ item.store_name }}</div>
          <div class="first_price">¥{{ item.price }}</div>
        </div>
      </div>
    </div>

    <van-cell-group>
      <van-cell
        center
        title="促销单品"
        is-link
        value="更多"
        :label="info.salesInfo"
      />
    </van-cell-group>
    <div class="container last">
      <div class="benefit" v-for="item in benefit" :key="item.id">
        <div class="benefit_left">
          <van-image fit="contain" :src="item.image" alt=""></van-image>
        </div>
        <div class="benefit_right">
          <div class="benefit_name">{{ item.store_name }}</div>
          <span class="benefit_price">促销价:¥{{ item.price }}</span>
          <div class="benefit_last">
            <div class="benefit_otpri">日常价:¥{{ item.ot_price }}</div>
            <div class="benefit_stock">仅剩:{{ item.stock }}件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      banner1: [],
      banner2: [],
      bannerIndex1: 1,
      bannerIndex2: 1,
      menus: [],
      noticeRoll: [],
      info: [],
      bastList: [],
      benefit: [],
      likeInfo: [],
      firstList: [],
    };
  },
  methods: {
    changeB(index) {
      this.bannerIndex1 = index + 1;
    },
    changeC(index) {
      this.bannerIndex2 = index + 1;
    },
  },
  created() {
    this.$axios.get("api/index").then((data) => {
      // console.log(data);
      this.banner1 = data.data.data.banner;
      this.menus = data.data.data.menus;
      this.noticeRoll = data.data.data.roll;
      this.info = data.data.data.info;
      this.banner2 = data.data.data.info.bastBanner;
      this.bastList = data.data.data.info.bastList;
      this.benefit = data.data.data.benefit;
      this.likeInfo = data.data.data.likeInfo;
      this.firstList = data.data.data.info.firstList;
      console.log("menus==>",this.menus);
    });
  },
  components: {},
};
</script>
<style lang="less">
.home {
  .van-cell-group {
    margin-top: 1.3rem;
  }
  .van-search {
    height: 50px;
    padding: 10px 25px;
    i.van-field_left-icon {
      font-size: 20px;
    }
    .van-image {
      margin-right: 13px;
    }
  }
  .my-swipe {
    .van-swipe-item {
      // height: 185px;
      .van-image {
        // height: 185px;
      }
    }
    .dot {
      position: absolute;
      z-index: 1;
      bottom: 10px;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 10px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.4);
        margin-left: 5px;
      }
    }
  }
  .van-grid {
    font-size: 13px;
    .van-grid-item {
      height: 95px;
    }
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .van-notice-bar {
    background-color: white;
    color: #777777;
    font-size: 12px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .van-image {
      border-right: 1px solid #777777;
      padding-right: 10px;
      margin-right: 10px;
    }
  }
  .van-cell-group {
    .van-cell__title {
      span {
        font-size: 16px;
        color: black;
        font-weight: bold;
      }
    }
  }

  .container {
    padding: 0px 1rem;
  }

  .fastInfo {
    overflow: auto;
    ul {
      height: 7.4rem;
      width: 65rem;
      li {
        width: 6rem;
        float: left;
        margin-right: 0.5rem;
        text-align: center;
        font-size: 0.8rem;
        border-bottom: 3px solid #66a3fe;
        height: 100%;
        &:last-child {
          margin-right: 0rem;
        }
        .van-image {
          width: 90%;
          margin-bottom: 0.2rem;
        }
        &:nth-child(3n) {
          border-bottom: 3px solid #ff766e;
        }
        &:nth-child(3n + 1) {
          border-bottom: 3px solid #47b479;
        }
      }
    }
  }
  .my-swipe2 {
    .van-swipe-item {
      // height: 185px;
      .van-image {
        // height: 185px;
      }
    }
    .dot {
      position: absolute;
      z-index: 1;
      bottom: 10px;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 10px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.4);
        margin-left: 5px;
      }
    }
  }
  .recommend {
    .rec_good {
      position: relative;
      margin-bottom: 1rem;
      & > a {
        color: black;
        display: flex;
        padding: 0.5rem 0px;
        height: 5.5rem;
        .rec_left {
          width: 5.5rem;
          .van-image {
            height: 100%;
            width: 100%;
            img {
              height: 5.5rem;
              width: 5.5rem;
            }
          }
        }
        .rec_right {
          overflow: hidden;
          margin-left: 1rem;
          width: calc(100% - 7rem);
          .rec_title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .rec_price {
            color: #fc4141;
            font-size: 1.1rem;
            margin-top: 1.5rem;
            span {
              font-size: 0.8rem;
              margin-right: 0.2rem;
            }
          }
          .rec_last {
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            margin-top: 0.4rem;
            .rec_vip {
              position: relative;
              &:after {
                content: "";
                background: url();
                height: 0.8rem;
                width: 2rem;
                position: absolute;
                top: 0px;
                background-repeat: no-repeat;
                background-size: 1.8rem 0.8rem;
              }
            }
            .rec_sale {
              margin-left: 3rem;
              color: #7f7f7f;
            }
          }
        }
        .rec_cart {
          position: absolute;
          right: 0px;
          bottom: 0.6rem;
          height: 1.5rem;
          width: 1.5rem;
          line-height: 1.75rem;
          text-align: center;
          border-radius: 50%;
          border: 1px solid #fc4141;
          .rec_cart {
            .van-icon {
            }
          }
        }
      }
    }
  }
  [class*="van-hairline"]::after {
    border: none;
  }
  .hotList {
    background-image: url("../assets/index-bg.7128c2eb.png");
    background-repeat: no-repeat;
    background-size: 100% 8rem;
    .van-cell-group {
      background-color: transparent;
      .van-cell {
        background-color: transparent;
        span.hotlabel {
          font-size: 0.8rem;
          margin-left: 1rem;
          font-weight: normal;
        }
        .van-cell__title {
          flex: none;
          span {
            color: white;
          }
        }
        .van-cell__value {
          color: white;
        }
        i {
          color: white;
        }
      }
    }
    .hotBox {
      display: flex;
      width: 90%;
      background-color: white;
      margin: 0 auto;
      border-radius: 1rem;
      padding: 0.7rem 0.5rem;
      justify-content: space-around;
      margin-top: 0.2rem;
      box-shadow: 0 0 0.25rem -0.1rem #696969;
      .hotItem {
        width: 6.5rem;
        text-align: center;
        .van-image {
          width: 6.5rem;
          height: 6.5rem;
          position: relative;
          img {
            border-radius: 0.5rem;
          }
        }
        .hot_name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hot_price {
          color: #ff5336;
          font-weight: bold;
          margin-top: 0.1rem;
        }
        &:nth-child(1) .van-image::after,
        &:nth-child(2) .van-image::after,
        &:nth-child(3) .van-image::after {
          content: "";
          position: absolute;
          background-image: url("../assets/one.2814de22.png");
          left: 0.2rem;
          top: 0.2rem;
          height: 1.8rem;
          width: 1.8rem;
          background-size: 100%;
        }
        &:nth-child(2) .van-image::after {
          background-image: url("../assets/two.1ea1d146.png");
        }
        &:nth-child(3) .van-image::after {
          background-image: url("../assets/three.2162defb.png");
        }
      }
    }
  }
  .first {
    .van-cell__title {
      position: relative;
      span.firstlabel {
        color: #ff5336;
        font-size: 0.9rem;
        margin-left: 0.3rem;
        position: absolute;
        left: 4rem;
        top: -0.2rem;
      }
    }
  }
  .firstBox {
    display: flex;
    overflow: auto;
    .firstItem {
      width: 6.5rem;
      text-align: center;
      .van-image {
        width: 6.5rem;
        height: 6.5rem;
      }
      .first_name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .first_price {
        color: #ff5336;
        font-weight: bold;
        margin-top: 0.1rem;
      }
    }
  }

  .benefit {
    height: 5.5rem;
    padding: 0.5rem 0px;
    display: flex;
    .benefit_left {
      width: 5.5rem;
      .van-image {
        height: 100%;
        width: 100%;
        img {
          height: 5.5rem;
          width: 5.5rem;
        }
      }
    }
    .benefit_right {
      margin-left: 1rem;
      width: calc(100% - 7rem);
      overflow: hidden;
      .benefit_name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 1rem;
      }
      .benefit_price {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
        background-color: #ff5336;
        color: white;
        border-radius: 0.8rem 0rem 0.8rem 0rem;
        text-align: center;
      }
      .benefit_last {
        display: flex;
        color: #969799;
        font-size: 0.8rem;
        margin-top: 0.8rem;
      }
      .benefit_otpri {
        text-decoration: line-through;
      }
      .benefit_stock {
        margin-left: auto;
      }
    }
  }
  .last {
    padding-bottom: 50px;
  }
}
</style>